import ReactECharts from 'echarts-for-react';
import { Empty } from 'antd';
import useWindowWidth from '@/hooks/event/use-window-width';
import { popularmajor } from '@/common/types';
import { color } from 'framer-motion';


interface Props {
  data: popularmajor[];
}

const HotTreemap = ({ data }: Props) => {
  const { isPc } = useWindowWidth();



  const option = {
    xAxis: { show: false },
    yAxis: { show: false },
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        return `
          <div style="font-weight:bold">${params.name}</div>
          <div>热度值: ${params.value}</div>
        `;
      }
    },
    visualMap: {
      show: false,
      min: Math.min(...data.map(item => item.popularity)), // 动态获取最小值
      max: Math.max(...data.map(item => item.popularity)), // 动态获取最大值
      inRange: {
        color: [
          '#BADDFF',
          '#69B4FF',
          '#3287FF',
          '#1B6DFA',
          '#024BD2',
        ]
      }
    },
    series: [
      {
        roam: false,
        type: 'treemap',
        breadcrumb: { show: false },
        data: data.map((item) => ({
          name: item.major,
          value: item.popularity,
        })),
        nodeClick: false,

      }
    ]
  };

  return (
    <div
      style={{
        minHeight: isPc ? 'unset' : '250px',
        // height: 'calc(100% - 20px)',
        height: "400px",
        width: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        // backgroundColor: data.length > 0 ? '#ECEFF7' : '',
      }}
    >
      {data.length > 0 ? (
        <ReactECharts option={option} style={{ height: isPc ? '100%' : '100%', width: '100%' }} />
      ) : (
        <Empty description="暂无数据" />
      )}
    </div>
  )
}

export default HotTreemap